import React from 'react';
import styled from '@emotion/styled';
import { Button, Input, Popconfirm } from 'antd';
import { PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { useChat } from '../context/ChatContext';

const SessionsContainer = styled.div`
  width: 250px;
  background: #1a1a1a;
  border-right: 1px solid #333;
  display: flex;
  flex-direction: column;
  height: 100vh;
`;

const SessionsList = styled.div`
  flex: 1;
  overflow-y: auto;
  padding: 16px;

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 2px;
  }
`;

const SessionItem = styled.div<{ active: boolean }>`
  padding: 12px;
  border-radius: 6px;
  background: ${props => props.active ? '#2d2d2d' : 'transparent'};
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: ${props => props.active ? '#fff' : '#999'};
  transition: all 0.2s;

  &:hover {
    background: ${props => props.active ? '#2d2d2d' : '#222'};
  }
`;

const SessionTitle = styled.div`
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
`;

const SessionActions = styled.div`
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;

  ${SessionItem}:hover & {
    opacity: 1;
  }
`;

const ActionButton = styled(Button)`
  padding: 4px 8px;
  height: auto;
  font-size: 12px;
  background: transparent;
  border: none;
  color: #999;

  &:hover {
    color: #fff;
    background: #333;
  }
`;

const NewSessionButton = styled(Button)`
  margin: 16px;
`;

export const ChatSessions: React.FC = () => {
  const { 
    sessions, 
    currentSession, 
    createNewSession, 
    switchSession, 
    deleteSession,
    updateSessionTitle 
  } = useChat();

  const [editingId, setEditingId] = React.useState<string | null>(null);
  const [editingTitle, setEditingTitle] = React.useState('');

  const handleEdit = (session: { id: string; title: string }) => {
    setEditingId(session.id);
    setEditingTitle(session.title);
  };

  const handleSaveTitle = () => {
    if (editingId && editingTitle.trim()) {
      updateSessionTitle(editingId, editingTitle.trim());
      setEditingId(null);
    }
  };

  return (
    <SessionsContainer>
      <SessionsList>
        {sessions.map(session => (
          <SessionItem
            key={session.id}
            active={session.id === currentSession}
            onClick={() => switchSession(session.id)}
          >
            {editingId === session.id ? (
              <Input
                size="small"
                value={editingTitle}
                onChange={e => setEditingTitle(e.target.value)}
                onPressEnter={handleSaveTitle}
                onBlur={handleSaveTitle}
                autoFocus
              />
            ) : (
              <>
                <SessionTitle>{session.title}</SessionTitle>
                <SessionActions>
                  <ActionButton
                    icon={<EditOutlined />}
                    onClick={(e) => {
                      e.stopPropagation();
                      handleEdit(session);
                    }}
                  />
                  <Popconfirm
                    title="确定要删除这个对话吗？"
                    onConfirm={(e) => {
                      e?.stopPropagation();
                      deleteSession(session.id);
                    }}
                    okText="确定"
                    cancelText="取消"
                  >
                    <ActionButton
                      icon={<DeleteOutlined />}
                      onClick={e => e.stopPropagation()}
                    />
                  </Popconfirm>
                </SessionActions>
              </>
            )}
          </SessionItem>
        ))}
      </SessionsList>
      <NewSessionButton
        type="primary"
        icon={<PlusOutlined />}
        onClick={createNewSession}
        block
      >
        新建对话
      </NewSessionButton>
    </SessionsContainer>
  );
}; 